<template>
	<view class="container">

		<view class="user-section">
			<view class="user-info-box">
			</view>
		</view>
		<view class="info-box">
			<view class="info-item">
				<view class="title-box">
					<view class="title-icon">
						<text class="yticon icon-shouye" style="font-size: 50upx;"></text>
					</view>
					<view class="title-text">
						外出登记信息
					</view>
				</view>
				<view class="list-cell">
					<view class="list-cell-item">
						<view class="item-title">姓名：</view>
						<view class="item-info">{{egressRecord.name || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">联系方式：</view>
						<view class="item-info">{{egressRecord.phone || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">身份证号：</view>
						<view class="item-info">{{egressRecord.idCard || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">登记时间：</view>
						<view class="item-info">{{egressRecord.createDate || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">外出时间：</view>
						<view class="item-info">{{egressRecord.time || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">外出类型：</view>
						<view class="item-info">{{egressRecord.type == "0"?"国内":"国外"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">外出地址：</view>
						<view class="item-info">{{egressRecord.address || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">外出原因：</view>
						<view class="item-info">{{egressRecord.reason || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">体温：</view>
						<view class="item-info">{{egressRecord.temperature || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">健康状况：</view>
						<view class="item-info">{{egressRecord.health == "0"? "不健康":"健康"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title" style="width: 340upx;">是否做过核酸检测：</view>
						<view class="item-info">{{egressRecord.test == "0" ? "否":"是"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">备注：</view>
						<view class="item-info">{{egressRecord.remark || "无"}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				egressRecord: {},
				itemId: ""
			}
		},
		onLoad(option) {
			this.itemId = option.itemId
			this.getData()
		},
		methods: {
			getData() {
				let params = {
					registerId: this.itemId
				}
				this.$api.request.queryRegisterById(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.egressRecord = res.body.data.entity;
					} else {
						this.$api.msg("查询信息失败")
					}
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.user-section {
		width: 100%;
		height: 300upx;
		position: relative;
		background: linear-gradient(#00b3fa, #E7EFFF);
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}

	.user-info-box {
		margin-top: 40upx;
		padding-left: 40upx;
		height: 120upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.info-box {
		width: 100%;
		position: absolute;
		top: 100upx;
	}

	.title-box {
		display: flex;
		flex-direction: row;
	}

	.title-icon {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.title-text {
		width: calc(100% - 100upx);
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1px dotted #dee3eb;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.info-item {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
	}


	.list-cell {
		padding: 20upx;

		.list-cell-item {
			padding: 30upx 0;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				width: 200upx;
				font-weight: border;
				color: #787684;
				margin-left: 20upx;
			}

			.item-info {
				width: calc(100% - 220upx);
				margin-right: 20upx;
				text-align: right;
			}
		}
	}
</style>
